<template>
  <div class="manager">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">费用</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="managerCon">
      <div class="container">
        <div class="row justify-content-center">
          <h2 class="text-primary">费用驾驶舱</h2>
        </div>
        <div class="content">
          <ul class="pl-0 row ">
            <li class="col-3">
              <div class="row justify-content-center">
                <div class="title">目标值</div>
              </div>
              <div class="num">{{fixNum(targetAmount)}}万</div>
            </li>
            <li class="col-3">
              <div class="row justify-content-center">
                <div class="title">预测值</div>
              </div>
              <div v-bind:class="['num', predictAmount > targetAmount? 'text-danger':'text-success']">{{fixNum(predictAmount)}}万</div>
            </li>
            <li class="col-3">
              <div class="row justify-content-center">
                <div class="title">实际值</div>
              </div>
              <div class="num">{{fixNum(sumAmount)}}万</div>
            </li>
            <li class="col-3">
              <div class="row justify-content-center">
                <div class="title">当月</div>
              </div>
              <div class="num">{{fixNum(nowMonthAmount)}}万</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="managerCon2">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="content">
              <ul class="pl-0 row ">
                <li class="col-4" @click="gotoCostDetails('费用一')">
                  <div class="row justify-content-center">
                    <div class="title">
                      <span>费用一</span>
                      <br/>
                      人工费用
                    </div>
                  </div>
                  <div class="num">
                    <!--<div class="font-weight-normal">目标值：88.22%</div>-->
                    <!--<div class="font-weight-normal">预测值：88.22%</div>-->
                    <!--<div >实际值：<span class="text-success">89.90%</span></div>-->
                    <!--<div class="font-weight-normal">当月值：88.22%</div>-->
                    <table class="table">
                      <tbody>
                        <tr style="font-weight: bold; font-size: 16px">
                          <td>目标</td>
                          <td>预测</td>
                          <td>实际</td>
                          <td>当月</td>
                        </tr>
                        <tr style="font-size: 15px; color: #5a6268; font-weight: bold" v-for="item in detailList" v-if="item.type == 3 + orgid + 1">
                          <td>{{fixNum(item.targetAmount)}}万</td>
                          <td v-bind:class="item.sumAmount - item.nowMonthAmount + (item.lastMonthAmount*month) > item.targetAmount ? 'text-danger': 'text-success'">{{fixNum(item.sumAmount - item.nowMonthAmount + (item.lastMonthAmount*month))}}万</td>
                          <td>{{fixNum(item.sumAmount)}}万</td>
                          <td>{{fixNum(item.nowMonthAmount)}}万</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </li>
                <li class="col-4" @click="gotoCostDetails('费用二')">
                  <div class="row justify-content-center">
                    <div class="title">
                      <span>费用二</span><br/>
                      固定费用和变动费用
                    </div>
                  </div>
                  <div class="num">
                    <table class="table">
                      <tbody>
                        <tr style="font-weight: bold; font-size: 16px">
                          <td>目标</td>
                          <td>预测</td>
                          <td>实际</td>
                          <td>当月</td>
                        </tr>
                        <tr style="font-size: 15px; color: #5a6268; font-weight: bold" v-for="item in detailList" v-if="item.type == 3 + orgid + 2">
                          <td>{{fixNum(item.targetAmount)}}万</td>
                          <td v-bind:class="item.sumAmount - item.nowMonthAmount + (item.lastMonthAmount*month) > item.targetAmount ? 'text-danger': 'text-success'">{{fixNum(item.sumAmount - item.nowMonthAmount + (item.lastMonthAmount*month))}}万</td>
                          <td>{{fixNum(item.sumAmount)}}万</td>
                          <td>{{fixNum(item.nowMonthAmount)}}万</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </li>
                <li class="col-4" @click="gotoCostDetails('费用三')">
                  <div class="row justify-content-center">
                    <div class="title">
                      <span>费用三</span>
                      <br/>
                      福利费
                    </div>
                  </div>
                  <div class="num">
                    <table class="table">
                      <tbody>
                        <tr style="font-weight: bold; font-size: 16px">
                          <td>目标</td>
                          <td>预测</td>
                          <td>实际</td>
                          <td>当月</td>
                        </tr>
                        <tr style="font-size: 15px; color: #5a6268; font-weight: bold" v-for="item in detailList" v-if="item.type == 3 + orgid + 3">
                          <td>{{fixNum(item.targetAmount)}}万</td>
                          <td v-bind:class="item.sumAmount - item.nowMonthAmount + (item.lastMonthAmount*month) > item.targetAmount ? 'text-danger': 'text-success'">{{fixNum(item.sumAmount - item.nowMonthAmount + (item.lastMonthAmount*month))}}万</td>
                          <td>{{fixNum(item.sumAmount)}}万</td>
                          <td>{{fixNum(item.nowMonthAmount)}}万</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "cost",
    data(){
      return{
        isActive:2,
        costAmount: 0, //总费用
        costNowMonth: 0, //本月总费用
        sumAmount: 0,
        nowMonthAmount: 0,
        targetAmount: 0,
        predictAmount: 0,
        detailList: [],
        loading: {},
        month: 12,
        lastMonthAmount: 0,
        orgid: window.sessionStorage.getItem('orgid')
      }
    },
    created() {
      this.month = 12 - new Date().getMonth()
      this.getCostList()
    },
    methods:{
      //跳转到首页
      gotoHome: function(){
        this.$router.push("/index")
        this.isActive=0
      },
      //跳转到书吧
      gotoNav: function(){
        this.$router.push("/nav2");
      },
      //跳转到详情
      gotoCostDetails: function(type){
        window.sessionStorage.setItem('type', type)
        this.$router.push("/costDetails")
      },
      getCostList(){
        // this.loading = this.$loading({
        //   lock: true,//lock的修改符--默认是false
        //   text: 'Loading',//显示在加载图标下方的加载文案
        //   spinner: 'el-icon-loading',//自定义加载图标类名
        //   background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
        //   target: document.querySelector('#table')//loadin覆盖的dom元素节点
        // });
        this.$http.get(
          '/api/getCostSum',
          {
            params: {
              type: 3 + this.orgid
            }
          }).then(res => {
          this.sumAmount = res.data.sumAmount
          this.nowMonthAmount = res.data.nowMonthAmount
          this.lastMonthAmount = res.data.lastMonthAmount
          this.targetAmount = res.data.targetAmount
          this.predictAmount = this.sumAmount - this.nowMonthAmount + (this.lastMonthAmount * this.month)
          this.detailList = res.data.list
          // this.loading.close()
        })
      },
      fixNum (num) {
        return (num/10000).toFixed(2)
      },
    },
    mounted(){
    }
  }
</script>

<style scoped>
  .breadcrumb{
    padding: 10px 5px;
    padding-bottom: 5px;
    background: white;
  }
  .breadcrumb-item a,
  .breadcrumb-item{
    font-size: 20px;
  }
  .manager{
    height: 120%;
  }

  .managerCon h2{
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 3px;
    position: relative;
    top: 20px;
    background: white;
    padding: 0 10px;
  }
  .managerCon2 h2{
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px;
  }
  .managerCon .content{
    /*background: url("~@/assets/img/bg1.jpg") no-repeat;*/
    background-size: 100% 100%;
    padding-top: 35px;
    padding-bottom: 35px;
  }
  .managerCon .content ul li{
    list-style: none;
    text-align: center;
    padding: 0 60px;
  }
  .managerCon2 .content ul li{
    list-style: none;
    text-align: center;
    padding: 0 10px;
    cursor: pointer;
  }
  .managerCon .content ul li .title{
    z-index: 999;
    background: white;
    font-size: 20px;
    color: #95999c;
    position: relative;
    top: 17px;
    letter-spacing: 2px;
    padding: 0 5px;
  }
  .managerCon2 .content ul li .title{
    z-index: 999;
    background: white;
    font-size: 16px;
    color: #95999c;
    position: relative;
    top: 28px;
    padding: 0 10px;
  }
  .managerCon2 .content ul li .title span{
    color: #5a6268;
    font-size: 18px;
  }
  .managerCon .content ul li .num{
    font-size: 26px;
    letter-spacing: 2px;
    font-weight: bold;
    border: 3px solid #7abaff;
    border-radius: 10px;
    padding: 30px 10px;

  }
  .managerCon2 .content ul li .num{
    font-size: 18px;
    letter-spacing: 2px;
    /*font-weight: bold;*/
    border: 3px solid #7abaff;
    border-radius: 10px;
    padding: 30px 10px 26px 10px;

  }
  .managerCon2 .content ul li .num div{
    margin: 10px 0;
  }
  .managerCon2 .content ul li .num table{
    margin-bottom: 0;
  }
  .managerCon2 .content ul li .num table tr td{
    border-top: none;
  }
  .table td, .table th{
    padding: 0.5rem;
  }
  .managerCon2 .content ul li .num table tr:last-child td:not(:last-child){
    border-right: 2px solid #cbd3da;
  }


  .top{
    background: #95999c;
    color: white;
  }
  .top a{
    color: white;
  }
  .top ul li{
    list-style-type: none;
    padding: 6px 0;
    font-weight: bold;
    letter-spacing: 5px;
    font-size: 17px;
  }
  .top ul .titleActive{
    background: white;
    color: #005cbf;
  }
  .top ul .titleActive a{
    color: #005cbf;
  }

  .el-timeline-item{
    padding-bottom: 10px;
  }

</style>
